<template>
	<div>
		<el-dialog :title="dialog.title" center show-close :before-close="handleClose" :visible.sync="dialog.visible" width="500px">
			<el-tree :data="dataTere" 
				node-key="id" 
				:default-checked-keys="defalutTreeNodeList" 
				show-checkbox 
				:check-strictly="checkStrictly"
				ref="tree"
				:props="defaultProps" 
				 highlight-current
				 default-expand-all
				@node-click="handleNodeClick"></el-tree>
			<el-button style="margin-top: 10px; margin-left: 250px;" type="primary" @click="updateRoleResource">分配资源</el-button>
		</el-dialog>
		<div>
			<vxe-table :data="tableData">
				<vxe-column field="roleName" title="角色名称"></vxe-column>
				<vxe-column field="description" title="描述"></vxe-column>
				<vxe-column title="操作" width="200" show-overflow>
					<template #default="{ row }">
						<el-button type="primary" icon="vxe-icon-edit" @click="editEvent(row)">分配资源 </el-button>
					</template>
				</vxe-column>
			</vxe-table>
			<el-pagination 
				layout="total, sizes, prev, pager, next, jumper" 
				:current-page="getRoleListQuery.pageNo"
				:page-size="pagination.pageSize" 
				:total="pagination.total"
				:page-sizes="[10,15,20]"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange">	
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	import {getRoleList,addRole,delRole,updateRole,getResourceCascader,getResourceListByRoleId,assignResources} from "../../../plugins/server.js"
	export default {
		data() {
			return {
				checkStrictly:true,
				dialog:{},
				tableData:[],
				rowRoleId:"",
				pagination:{},
				dataTere:[],
				defalutTreeNode:[],
				defalutTreeNodeList:[],
				defaultProps:{
					children: 'children',
					label: 'label'
				},
				getRoleListQuery:{
					pageNo:1,
					pageSize:"10",
					sortBy:"",
					isAsc:"",
					roleName:""
				},
			}
		},
		methods: {
			//根据roleid----》去查出roleResource的值
			//查出所有资源
			//根据=====》算出tree值
			handleNodeClick(){},
			updateRoleResource({row}){
				let val=this.$refs.tree.getHalfCheckedKeys();
				let newArr= val.concat(this.$refs.tree.getCheckedKeys());
				let roleId=this.rowRoleId.roleId;
				let data={
					roleId,
					"resourceIds":newArr
				}	
				assignResources(data).then(res=>{
					this.dialog.visible=false;
					this.checkStrictly=false;
					this.$message({
						message:res.data.message,
						type:"success"
					})
				})
				
			},
			getTreeNode(treeNodeList){				
				let newNodeList=[];
				let treeNode={};
				for(let item of treeNodeList){
					if(item.resourceList.length>0){
						treeNode={
							id:item.id,
							label:item.resourceName,
							children:this.getTreeNode(item.resourceList)
						}
					}else{
						treeNode={
							id:item.id,
							label:item.resourceName,
						}
					}
					
					newNodeList.push(treeNode)
				}
				return newNodeList;
			},
			//更新表数据
			getTableData(){
				getRoleList(this.getRoleListQuery).then(res=>{
					this.tableData=res.data.data.list;
					this.pagination={
						total:res.data.data.total,
						pages:res.data.data.pages
					}
				})
			},
			handleCurrentChange(val){
				//更改页数
				this.getRoleListQuery.pageNo=val;
				this.getTableData();
			},
			handleSizeChange(val){
				this.getRoleListQuery.pageSize=val;
				this.getTableData();
			},
			handleClose(done) {
				this.defalutTreeNode=[];
				
				this.$confirm('确认关闭？')
					.then(_ => {
						
						done();
						
					})
					.catch(_ => {});
			},
			editEvent(row){
				this.getTreeNodeList();
				this.rowRoleId={
					roleId:row.id
				}
				this.checkStrictly=true;
				//根据RoleId=====>查出resourceId
				getResourceListByRoleId(this.rowRoleId).then(res=>{
					for(let item of res.data.data){	
						this.defalutTreeNode.push(item.resourceId)
					}
					this.$refs.tree.setCheckedKeys(this.defalutTreeNode)
					
				})
				this.dialog={
					title:"分配资源",
					visible:true,
					isAdd:false
				}
				
			},
			getTreeNodeList(){
				getResourceCascader().then(res=>{
					this.dataTere=this.getTreeNode(res.data.data)
				})
			}
		},
		
		components: {},
		created() {
			this.getTableData()
			
		}
	}
</script>

<style >

	
</style>